<ion-content>
  <ion-grid>
    <ion-row class="ion-align-items-center">
      <ion-col class="ion-text-center">
        <ion-card color="dark">
          <ion-card-header
            class="ion-text-center"
            style="padding-bottom: 8px"
            *ngIf="loading || storageDrives.length; else empty"
          >
            <ion-card-title>Select storage drive</ion-card-title>
            <div class="center-wrapper">
              <ion-card-subtitle>
                This is the drive where your StartOS data will be stored.
              </ion-card-subtitle>
            </div>
          </ion-card-header>
          <ng-template #empty>
            <ion-card-header
              class="ion-text-center"
              style="padding-bottom: 8px"
            >
              <ion-card-title>No drives found</ion-card-title>
              <div class="center-wrapper">
                <ion-card-subtitle>
                  Please connect a storage drive to your server. Then click
                  "Refresh".
                </ion-card-subtitle>
              </div>
            </ion-card-header>
          </ng-template>

          <ion-card-content class="ion-margin">
            <!-- loading -->
            <ion-spinner
              *ngIf="loading; else loaded"
              class="center-spinner"
              name="lines-sharp"
            ></ion-spinner>

            <!-- not loading -->
            <ng-template #loaded>
              <ion-item-group
                *ngIf="storageDrives.length"
                class="ion-padding-bottom"
              >
                <ion-item
                  (click)="chooseDrive(drive)"
                  class="ion-margin-bottom"
                  [disabled]="tooSmall(drive)"
                  button
                  lines="none"
                  *ngFor="let drive of storageDrives"
                >
                  <ion-icon
                    slot="start"
                    name="save-outline"
                    size="large"
                  ></ion-icon>
                  <ion-label class="ion-text-wrap">
                    <h1>
                      {{ drive.vendor || 'Unknown Vendor' }} - {{ drive.model ||
                      'Unknown Model' }}
                    </h1>
                    <h2>
                      {{ drive.logicalname }} - {{ drive.capacity | convertBytes
                      }}
                    </h2>
                    <p *ngIf="tooSmall(drive)">
                      <ion-text color="danger">
                        Drive capacity too small.
                      </ion-text>
                    </p>
                  </ion-label>
                </ion-item>
              </ion-item-group>
              <ion-button fill="solid" color="primary" (click)="getDrives()">
                <ion-icon slot="start" name="refresh"></ion-icon>
                Refresh
              </ion-button>
            </ng-template>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
